<template>
  <div class="menu-container">
    <ul>
      <RouterLink 
        v-for="item in items" 
        :key="item.path" 
        :to="{name:item.name}"
        :exact="!item.startWith"
        exact-path
        >
        <li >
          <div>
            <Icon :type="item.iconType" />
          </div>
          <div class="menu-text">
            {{ item.text }}
          </div>
        </li>
      </RouterLink>
    </ul>
  </div>
</template>

<script>
import Icon from "@/components/Icon";
export default {
  data() {
    return {
      items: [
        {
          path: "/",
          text: "首页",
          iconType: "home",
          name:"Home"
        },
        {
          path: "/blog",
          text: "文章",
          iconType: "blog",
          name:"Blog",
          startWith:true
        },
        {
          path: "/about",
          text: "关于我",
          iconType: "about",
          name:"About",
        },
        {
          path: "/project",
          text: "项目&效果",
          iconType: "code",
          name:"Project",
        },
        {
          path: "/message",
          text: "留言板",
          iconType: "info",
          name:"Message"
        },
      ],
    };
  },
  methods: {

  },
  components: {
    Icon,
  },
};
</script>

<style lang='less' scoped>
@import "~@/styles/global.less";
.menu-container {
  color: @gray;
  li {
    font-size: 15px;
    color: @lightWords;
    display: flex;
    height: 40px;
    align-items: center;
    padding: 0px 50px;
    margin: 5px 0;
  }
  .router-link-active > li ,li:hover{
      color: white;
      background-color: darken(@words, 3%);
    }
  .menu-text {
    padding-left: 10px;
  }
}
</style>